{include file="common/head"/}
<style>
    .layui-table-cell{height: auto;}
    .layui-table-cell ul li a{color: #1C8FEF;display: block;border: 1px solid #ececec;padding: 3px 8px;}
    .layui-table-cell ul li a:hover{color: #005580}
</style>
<div class="admin-main layui-anim layui-anim-upbit">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>部门管理</legend>
    </fieldset>
    <blockquote class="layui-elem-quote">
    <a id="add" class="layui-btn layui-btn-sm">添加部门</a>
   <!-- <a href="{:url('manage')}" class="layui-btn layui-btn-sm">re</a>-->
    </blockquote>
    <table class="layui-table" id="list" lay-filter="list"></table>
</div>

<script type="text/html" id="barDemo">
    <a data-id="{{d.section_id}}" class="layui-btn layui-btn-xs edit-section">{:lang('edit')}</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">{:lang('del')}</a>
</script>

{include file="common/foot"/}
<script>
    layui.use(['element', 'layer', 'jquery','table'], function() {
        var element = layui.element, table = layui.table, form = layui.form;
        var $ = layui.$;
        // 渲染表格
        table.render({
            id: 'user',
            elem: '#list',
            url: "{:url('manage')}",
            method: 'post',
            even:true,
            page: true,
            limit:10,
            cols: [[
                {field: 'title', title: '部门名称', width: 180}
                , {field: 'create_time', title: '创建时间', width: 200}
                , {field: 'update_time', title: '更新时间', width: 200}
                ,{width: 200, align: 'center', toolbar: '#barDemo'}
            ]]
        });


        // 新增部门
        $('#add').on('click',function () {
            layer.open({
                type:2,
                title: '添加部门',
                shadeClose:true,
                shade:0.3,
                area:['480px','420px'],
                content: '{:url("addSection")}'
            });
        });

        // 修改部门
        $(document).on('click','.edit-section',function () {
            var id=$(this).attr('data-id');
            layer.open({
                type:2,
                title: '编辑部门',
                shadeClose:true,
                shade:0.3,
                area:['480px','200px'],
                content: '{:url("sectionEdit")}?section_id='+id
            });
        });

        // 使用工具条监听删除事件
        table.on('tool(list)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('你确定要删除该部门吗？', function(index){
                    loading =layer.load(1, {shade: [0.1,'#fff']});
                    $.post("{:url('sectionDel')}",{section_id:data.section_id},function(res){
                        layer.close(loading);
                        layer.close(index);
                        if(res.code==1){
                            layer.msg(res.msg,{time:1000,icon:1});
                            obj.del();
                        }else{
                            layer.msg(res.msg,{time:1000,icon:2});
                        }
                    });
                });
            }
        });
    });
</script>
</body>
</html>